<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('我的分组')" />
  <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">

  <div class="container-div">
    <div class="row">
      <div class="col-sm-12 search-collapse">
        <form id="form-my-group">
          <div class="select-list">
            <ul>
              <li>
                <label>选择分组：</label>
                <select class="form-control" name="groups" th:with="item=${groups}">
                  <option value="" selected>　</option>
                  <option th:each="e : ${item}" th:text="${e}" th:value="${e}"></option>
                </select>
              </li>
              <li>
                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
              </li>
            </ul>
          </div>
        </form>
      </div>

      <div class="btn-group-sm" id="toolbar" role="group">
      </div>

      <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
      </div>
    </div>
  </div>

  <th:block th:include="include :: footer" />
  <th:block th:include="include :: bootstrap-table-fixed-columns-js" />
  <th:block th:include="include :: select2-js" />

  <script th:inline="javascript">
    const operateFlag = [[${@permission.hasPermi('disjob:mygroup:operate')}]];
    const prefix = ctx + "disjob/mygroup";

    $(function () {
      const options = {
        url: prefix + "/list",
        fixedColumns: true,
        fixedNumber: 2,
        modalName: "分组",
        columns: [{
          checkbox: true
        },
        {
          field: 'group',
          title: '分组名称',
          formatter: function (value, row, index) {
            return '<a href="javascript:void(0)" onclick="workers(\'' + value + '\')">' + value + '</a>';
          }
        },
        {
          field: 'workerContextPath',
          title: 'Context-path',
          formatter: function (value, row, index) {
            return $.table.tooltip(value, 30, "open");
          }
        },
        {
          field: 'ownUser',
          title: '负责人'
        },
        {
          field: 'devUsers',
          title: '开发人员',
          formatter: function (value, row, index) {
            return $.table.tooltip(value, 72, "open");
          }
        },
        {
          field: 'alarmUsers',
          title: '告警人员',
          formatter: function (value, row, index) {
            return $.table.tooltip(value, 72, "open");
          }
        },
        {
          field: 'webHook',
          title: 'Web Hook',
          formatter: function (value, row, index) {
            return $.table.tooltip(value, 72, "open");
          }
        },
        {
          field: 'updatedBy',
          title: '更新人'
        },
        {
          field: 'updatedAt',
          title: '更新时间'
        },
        {
          field: 'createdBy',
          title: '创建人',
          visible: false
        },
        {
          field: 'createdAt',
          title: '创建时间',
          visible: false
        },
        {
          title: '操作',
          align: 'center',
          formatter: function (value, row, index) {
            if (![[${@permission.isPermitted('disjob:mygroup:operate')}]]) {
              return '';
            }
            const actions = [];
            actions.push("<a class='btn btn-success btn-rounded btn-xs " + operateFlag + "' href='javascript:void(0)' onclick='edit(&quot;" + row.group + "&quot;)'><i class='fa fa-edit'></i> 编辑</a> ");
            return '<a tabindex="0" class="btn btn-info btn-rounded btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + actions.join('') + '"><i class="fa fa-chevron-circle-right"></i> 操作</a>';
          }
        }]
      };
      $.table.init(options);
    });

    function resetForm() {
      $.form.reset();
      const elem = $("select[name='groups']");
      elem.val(elem.val()).trigger("change");
    }

    function edit(group) {
      $.modal.open("修改" + table.options.modalName, prefix + "/edit/" + group, '680', '430');
    }

    function workers(group) {
      $.modal.popupRight(group, prefix + "/worker?group=" + group);
    }
  </script>

</body>
</html>
